<!-- 预览 -->
<template>
  <div class="container">
    <div class="preview-content">
      <div class="question-idx-list">
        <div :class="selectIndex == index ? 'item active' : 'item'" :id="index" v-for="(item, index) in previewData" @click="selectQuestion(index)">{{ index + 1 }}</div>
      </div>
      <el-carousel ref="carousel" :autoplay="false" :loop="false" arrow="always" height="480px" @change="carouselChange">
        <el-carousel-item v-for="(item2, index2) in previewData" :key="index2">
          <div class="question-item">
            <div class="item-top">
              <div class="top-left">
                <div class="item-1">
                  <span>{{ $t('previewLangList.questionType') }}：</span>
                  <span>{{ questionTypeArr.find(v => v.value === item2.category).label }}</span>
                  <span v-if="item2.questionsCountDesc">{{ item2.questionsCountDesc }}</span>
                </div>
                <div class="item-2" v-if="item2.questionsIdx">
                  <span>{{ $t('previewLangList.questionLow') }}{{ item2.questionsIdx }}：</span>
                  <span v-if="item2.category == 'reading'">{{ $t('previewLangList.desc1') }}</span>
                  <span v-else-if="item2.category == 'cloze'">{{ $t('previewLangList.desc2') }}</span>
                  <span v-else-if="item2.category == 'listening'">{{ $t('previewLangList.desc3') }}</span>
                </div>
              </div>
              <div class="top-right" v-if="item2.category == 'reading' || item2.category == 'cloze'">
                <el-button type="primary" @click="lookOriginText(item2.groupSubjectTxt)">{{ $t('previewLangList.lookOrigin') }}</el-button>
              </div>
            </div>
            <div class="item-content">
              <div class="content-list">
                <div class="content-list-item" v-for="item3 in item2.questions">
                  <div class="question-desc">
                    <span v-html="parseNameHtml(item3.subjectTxt, item3.subjectAudio)"></span>
                    <audio v-if="item2.groupSubjectAudio" src="item2.groupSubjectAudio" controls="controls" loop="loop" preload="auto"></audio>
                  </div>
                  <div class="question-answer-list">
                    <div class="item" v-for="item4 in item3.options">
                      <span v-if="item2.category !== 'judge'" class="option-key">{{ item4.optionKey }}.</span>
                      <span v-html="parseNameHtml(item4.optionTxt, item4.optionAudio)"></span>
                    </div>
                  </div>
                  <div class="question-analysis">
                    <div class="real-analysis" v-if="item2.category !== 'combination'">
                      <span>{{ $t('previewLangList.realAnalysis') }}</span>
                      <span class="answer-key">{{ item3.answerKey }}</span>
                    </div>
                    <div class="analysis-text" style="display: flex; align-items: center">
                      <span>{{ $t('previewLangList.analysisText') }}</span>
                      <span v-html="parseNameHtml(item3.analysisTxt, item3.analysisAudio)" style="flex: 1; margin-left: 30px;"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <!-- 查看原文 -->
      <el-dialog :title="$t('previewLangList.lookOrigin')" :visible.sync="dialogOriginTextVisible" width="600px">
        <div v-html="originText"></div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getQuestionDetail } from '@/api/question'
import { getPaperQuestion } from '@/api/paper'
import { parseQuestionNameHtml } from '@/utils'
import { cates } from '@/utils/dic'
export default {
  name: 'Preview',
  data() {
    return {
      id: '',
      pageType: 'question',
      questionData: [],
      previewData: [],
      selectIndex: 0,
      questionTypeArr: cates,
      dialogOriginTextVisible: false,
      originText: ''
    }
  },
  created() {
    this.id = this.$route.query && this.$route.query.id
    this.pageType = this.$route.query && this.$route.query.type
    if (this.pageType === 'question') {
      this.getQuestionDetail()
    } else if (this.pageType === 'paper') {
      this.getQuestionList()
    }
  },
  methods: {
    // 获取试题列表数据
    async getQuestionList() {
      const _this = this
      const loading = _this.$loading({
        lock: true,
        text: '数据获取中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.6)'
      })
      const paperQuestionArr = await getPaperQuestion(_this.id, { page: 1, pageSize: 1000000})
      for (let i = 0; i < paperQuestionArr.items.length; i++){
        const retObj = await getQuestionDetail(paperQuestionArr.items[i].id)
        _this.questionData.push(retObj)
      }
      _this.parseQuestionData()
      loading.close()
    },
    // 获取试题详情
    getQuestionDetail() {
      const _this = this
      const loading = _this.$loading({
        lock: true,
        text: '数据获取中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.6)'
      })
      getQuestionDetail(_this.id).then(res => {
        loading.close()
        if (res) {
          _this.questionData.push(res)
          _this.parseQuestionData()
        }
      })
    },
    parseNameHtml(htmlStr, audioUrl) {
      return parseQuestionNameHtml(htmlStr, audioUrl)
    },
    // 解析数据
    parseQuestionData() {
      let length2Desc = 0
      this.questionData.forEach((v, i) => {
        if (v.category === 'reading' || v.category === 'cloze' || v.category === 'listening') {
          const parseObj = {...v}
          parseObj.questionsCountDesc = '(' + (i + 1 + length2Desc) + '~' + (i + v.questions.length + length2Desc) + ')'
          length2Desc += v.questions.length - 1
          v.questions.forEach((v2, i2) => {
            let pushObj = {}
            const arrayPush = []
            arrayPush.push(v2)
            pushObj = {...parseObj}
            pushObj.questions = arrayPush
            pushObj.questionsIdx = i2 + 1
            this.previewData.push(pushObj)
          })
        } else {
          this.previewData.push(v)
        }
      })
    },
    // 选择题目
    selectQuestion(idx) {
      if (idx != this.selectIndex) {
        this.selectIndex = idx
        this.$refs.carousel.setActiveItem(idx)
      }
    },
    carouselChange(val) {
      this.selectIndex = val
      document.getElementById(val).scrollIntoView()
    },
    // 查看原文
    lookOriginText(textHtml) {
      this.originText = textHtml
      this.dialogOriginTextVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
  .container {
    background-image: url("../../assets/preview_images/bg.png");
    height: calc(100vh - 85px);
    font-size: 16px;
    .preview-content {
      background-image: url("../../assets/preview_images/app_lined_paper.png");
      padding: 20px;
      .question-item {
        margin: 20px auto;
        line-height: 2;
        height: 460px;
        overflow-y: auto;
        width: 640px;
        .item-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .top-left > div {
            font-size: 14px;
            color: #555555;
          }
        }
        .item-content {
          .question-desc {
            margin-bottom: 20px;
            display: flex;
          }
          .question-answer-list {
            .item {
              display: flex;
              align-items: center;
              .option-key {
                font-weight: bold;
              }
              /deep/ p {
                display: flex;
                align-items: center;
                margin-left: 20px;
              }
            }
          }
          .question-analysis {
            margin-top: 60px;
            .analysis-text {
              /deep/ p {
                display: flex;
                align-items: center;
              }
            }
            .answer-key {
              font-weight: bold;
              font-size: 16px;
              color: #409eff;
              margin-left: 60px;
            }
            .analysis-key {
              margin-left: 60px;
            }
          }
          /deep/ img {
            width: 60px !important;
            height: 60px !important;
          }
        }
      }
    }
  }
  .question-idx-list {
    width: 640px;
    overflow-x: auto;
    justify-content: center;
    display: -webkit-box;
    margin: 0 auto;
    .item {
      cursor: pointer;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #EAEEF1;
      color: #454545;
      text-align: center;
      line-height: 60px;
      margin: 0 10px;
    }
    .item.active {
      background: #409EFF;
      color: #FFFFFF;
    }
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
  }
  .el-carousel__item:nth-child(2n) {
    /*background-color: #99a9bf;*/
  }
  .el-carousel__item:nth-child(2n+1) {
    /*background-color: #d3dce6;*/
  }
</style>
